<template>
<div class="new-tab-page large parkinglot-wrapper" key="editRule">
  <div class="page-main-title" v-if="pageChargeList.parkChargeBaseVoList">
    {{ $route.query.isAddRule ? '新增收费规则' :  `编辑-${pageChargeList.parkChargeBaseVoList[0].typeName}`}}
    <i class="return-icon" @click="back"></i>
  </div>
  <div class="main-content" v-if="parkBaseInfo">
    <div>
      <el-form :model="pageChargeList" ref="pageChargeList" label-width="120px" size="small" class="zb-form rule-form" v-for="(parkChargeBaseVoListItem, parkChargeBaseVoListItemIndex) in pageChargeList.parkChargeBaseVoList" :key="parkChargeBaseVoListItemIndex">
        <div class="charge-rule">
          <div class="rule-top">
            <div class="el-form--inline zb-inline-form rule-inline-form">
              <el-form-item label="收费规则名称" label-width="117px" class="input-width-control" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.typeName'" :rules="{
                    required: true, message: '收费规则名称不能为空', trigger: 'blur'
                  }">
                <el-input v-model.trim="parkChargeBaseVoListItem.typeName"></el-input>
              </el-form-item>
            </div>

          
             <div class="el-form--inline zb-inline-form rule-inline-form select">
                <el-form-item label="配置规则" label-width="80px" style="margin-left: 15px">
                  <el-select placeholder="请选择" @change="changeChargeRuleType($event, parkChargeBaseVoListItem, parkChargeBaseVoListItem.chargeTypeSeq, parkChargeBaseVoListItem.uiOpt.carTypeOpt)" v-model="parkChargeBaseVoListItem.isFree">
                      <el-option
                        label="免费车场"
                        value="免费车场">
                      </el-option>
                      <el-option
                        label="收费车场"
                        value="收费车场">
                      </el-option>
                    </el-select>
                </el-form-item>
             </div>

            <div class="el-form--inline zb-inline-form rule-inline-form select" v-if="parkChargeBaseVoListItem.isFree !== '免费车场'">
                <el-form-item label="适用车型" label-width="80px" style="margin-left: 15px">
                  <el-select placeholder="请选择" :disabled="parkChargeBaseVoListItem.isFree === '免费车场'" @change="changeCarType($event, parkChargeBaseVoListItem)" v-model="parkChargeBaseVoListItem.uiOpt.ruleCarType">
                      <el-option
                        label="区分"
                        value="区分">
                      </el-option>
                      <el-option
                        label="不区分"
                        value="不区分">
                      </el-option>
                    </el-select>
                </el-form-item>
             </div>

            <div class="el-form--inline zb-inline-form rule-inline-form" :style="{marginLeft: parkChargeBaseVoListItem.isFree === '免费车场' ? '225px' : '0'}">
              <el-form-item label="" label-width="0" style="margin-left: 15px">
                <el-checkbox v-model="parkChargeBaseVoListItem.isDefault" :disabled="parkChargeBaseVoListItem.chargeTypeSeq === defaultRuleItem.chargeTypeSeq && parkChargeBaseVoListItem.isDefault" @change="setDefaultRuleGroup($event)">设为默认</el-checkbox>
              </el-form-item>
            </div>
          </div>
            <div class="charge-content" v-if="parkChargeBaseVoListItem.isFree === '收费车场'">
              <div
                    class="charge-type-tab"
                    v-if="parkChargeBaseVoListItem.isFree === '收费车场' && parkChargeBaseVoListItem.uiOpt.ruleCarType === '区分'"
                  >
                    <a
                      href="javascript:;"
                      class="tab-item"
                      v-for="item in parkChargeBaseVoListItem.uiOpt.carTypeOpt"
                      :key="item.value"
                      :class="{active: parkChargeBaseVoListItem.uiOpt.curCarType === item.value}"
                      @click="parkChargeBaseVoListItem.uiOpt.curCarType = item.value"
                    >{{item.name}}</a>
                  </div>
              <div v-show="parkChargeBaseVoListItem.uiOpt.ruleCarType === '不区分' || (parkChargeBaseVoListItem.uiOpt.ruleCarType === '区分' && parkChargeBaseVoListItem.uiOpt.curCarType === parkChargeStandardVoListItem.carType)" class="rule-items" v-for="(parkChargeStandardVoListItem, parkChargeStandardVoListIndex) in parkChargeBaseVoListItem.parkChargeStandardVoList" :key="parkChargeStandardVoListIndex">
                <div class="rule-item">
                  <div class="rule-detail">
                      <div class="detail-content">
                        <div class="el-form--inline zb-inline-form rule-inline-form" style="margin-bottom: 16px">
                          <el-form-item label="免费时长" label-width="116px" class="input-width-control hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.freeTime'" :rules="{
                            required: true, validator: checkFreeUnit , trigger: 'blur'
                          }">
                            <el-input type="text" v-model="parkChargeStandardVoListItem.freeTime" min="0"></el-input>
                            <span class="unit">分钟</span>
                          </el-form-item>
                          
                          <el-form-item label="" label-width="0" style="margin-left: 15px">
                            <el-checkbox v-model="parkChargeStandardVoListItem.freeTimeAcc">列入计费</el-checkbox>
                          </el-form-item>
                        </div>

                        <div class="el-form--inline zb-inline-form rule-inline-form">
                          <el-form-item label="区分时段" label-width="116px" class="input-width-control">
                            <el-radio-group v-model="parkChargeStandardVoListItem.uiOpt.curSplitTime" @change="setChargeRuleIsTimes($event, parkChargeStandardVoListItem)" class="rule-times-radio">
                              <el-radio :label="item" v-for="(item, index) in parkChargeStandardVoListItem.uiOpt.splitTimeOpt">{{item}}</el-radio>
                            </el-radio-group>

                          </el-form-item>

                          <template v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '分时段'">
                            <el-form-item label="分" label-width="26px" class="input-width-control">
                              <el-input-number :min="2" :max="100" label="时段数" v-model="parkChargeStandardVoListItem.uiOpt.splitTimeCount" @change="splitTimeChange($event, parkChargeStandardVoListItem.parkChargeStandardPeriodVoList)"></el-input-number>
                            </el-form-item>
                            <span class="unit">段</span>
                          </template>

                          <el-tooltip effect="dark" placement="top">
                            <div slot="content">
                              不分时段：整个停车时段默认同一种计算方式 <br />
                              分时段：根据停车时段的不同，用的计算方法不同，如日夜区分型车场<br />
                              </div>
                              >
                              <i
                                class="el-icon-question question-icon"
                                style="transform: tranlateY(2px)"
                              ></i>
                          </el-tooltip>

                        </div>

                        <div class="rule-setting" v-for="(TimeRuleItem, index) in parkChargeStandardVoListItem.parkChargeStandardPeriodVoList" v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段'">

                          <el-form-item label="" label-width="0px" class="input-width-control" style="margin-bottom: 0; margin-top: 18px"  :style="{marginLeft: parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段' ? '0px' : '40px'}">
                            <el-radio-group v-model="TimeRuleItem.uiOpt.curRuleType" @change="timeRuleChange($event, TimeRuleItem)">
                              <div class="rule-type-tab">
                                <el-tooltip effect="dark" :content="`${item === '按次定额收费' ? '适用于按停车次数收费的停车场' : ''}${item === '按单价收费' ? '适用于按单位时间收费的停车场，如6元/小时' : ''}${item === '递增收费' ? '适用于前段时间收取固定额，后段按定额或单位时间收取费用的场景' : ''}`" placement="top" v-for="(item, index) in TimeRuleItem.uiOpt.ruleTypeOpt">
                                  <div class="tab-item" :class="{active: item === TimeRuleItem.uiOpt.curRuleType}">
                                    <el-radio :label="item">{{item}}</el-radio>
                                  </div>
                                </el-tooltip>

                              </div>
                            </el-radio-group>
                          </el-form-item>
                          <div class="rule-setting-content" :style="{marginLeft: parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段' ? '0px' : '40px', marginRight: parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段' ? '0px' : '40px'}">

                            <div class="dingE-content type-content" v-if="TimeRuleItem.uiOpt.curRuleType === '按次定额收费'">
                              <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                <div class="el-form--inline zb-inline-form rule-inline-form">
                                  <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                    <el-input placeholder="￥" type="text" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                     <span class="unit">元/次</span>
                                  </el-form-item>
                                </div>
                              </template>
                            </div>

                            <div class="price-content type-content" v-if="TimeRuleItem.uiOpt.curRuleType === '按单价收费'">
                              <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                <div class="el-form--inline zb-inline-form rule-inline-form">
                                  <el-form-item label="每" label-width="40px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                     <span class="unit">分钟</span>
                                  </el-form-item>


                                  <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                     <span class="unit">元</span>
                                  </el-form-item>

                                 
                                </div>
                              </template>
                            </div>

                            <div class="xunhuan-content type-content" v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费'">
                              <div class="top-circle"></div>
                              <div class="bottom-circle"></div>
                              <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                <div class="el-form--inline zb-inline-form rule-inline-form" v-if="dindex === 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1">
                                  <el-form-item label="首" label-width="78px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                    <span class="unit">分钟</span>
                                  </el-form-item>


                                  <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                    <span class="unit">元</span>
                                  </el-form-item>

                                  

                                  <el-button type="primary" size="mini" class="add-ruleDetial-icon" style="margin-left: 8px" @click="addDingE_RuleItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList)"><i class="el-icon-plus"></i>定额</el-button>
                                  <el-button type="primary" size="mini" class="add-ruleDetial-icon" @click="addXunHuan_RuleItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList)" :disabled="TimeRuleItem.isHasXunhuan"><i class="el-icon-plus"></i>循环</el-button>
                                </div>

                                <div class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form" v-if="dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1">
                                  <el-form-item label="定额" label-width="78px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                    <span class="unit">分钟</span>
                                  </el-form-item>


                                  <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                     <span class="unit">元</span>
                                  </el-form-item>

                                  <div class="del-icon" @click="delRuleItemDetailItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)">
                                    <i class="el-icon-close"></i>
                                  </div>
                                </div>
                              </template>
                              <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">

                                <div class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form" v-if=" ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 2">
                                  <el-form-item label="之后每" label-width="78px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                    <span class="unit">分钟</span>
                                  </el-form-item>


                                  <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                    <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                    <span class="unit">元</span>
                                  </el-form-item>

                                  

                                  <div class="del-icon" @click="delRuleItemDetailXunHuanItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)">
                                    <i class="el-icon-close"></i>
                                  </div>
                                </div>

                              </template>

                            </div>

                             <div class="el-form--inline zb-inline-form rule-inline-form" style="margin-top: 18px; margin-bottom: 0px" :style="{marginLeft: TimeRuleItem.uiOpt.curRuleType === '递增收费' ? '20px' : '0px'}" v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费' || TimeRuleItem.uiOpt.curRuleType === '按单价收费'">
                                <el-form-item label="结算方式"  label-width="78px" class="jie-suan">
                                  <el-radio-group v-model="TimeRuleItem.mxSettleType">
                                    <el-radio v-for="item in opts.optionMxSettleType" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
                                  </el-radio-group>
                                </el-form-item>
                                <el-tooltip effect="dark" placement="top">
                                  <div slot="content">
                                    自然计算：超过时间区间后顺延至计费单位结束才进入下一个时间区间进行计费； <br />
                                      强制结算：超过时间区间点后，不考虑计费单位，直接转入下一个时间区间进行计费<br />
                                      如：<br />
                                      12点前5元/小时，12点后6元/小时，车11:30进场<br />
                                      自然结算：11:30-12:30 5元，12:30后才按6元/小时收费，如果12:15出场，则需交费5元；<br />
                                      强制结算：11:30-12:00 5元，12:00后按照6元/小时收费，如果12:15出场，则需交费5元+6元=11元
                                    </div>

                                    <i class="el-icon-question question-icon"></i>
                                </el-tooltip>
                              </div>

                          </div>
                        </div>

                        <!-- //区分时段 -->
                        <div class="rule-setting dates-rules" v-for="(TimeRuleItem, index) in parkChargeStandardVoListItem.parkChargeStandardPeriodVoList" v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '分时段'">

                          <div class="el-form--inline zb-inline-form rule-inline-form date-form-item">
                            <el-form-item :label="`时段${index + 1}`" label-width="60px">
                              <el-time-picker value-format="HH:mm:ss" format="HH:mm:ss" :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }" placeholder="开始时间" v-model="TimeRuleItem.timeArray[0]">
                              </el-time-picker>
                            </el-form-item>
                            <span
                                class="unit"
                                style="margin-right: 10px"
                              >至</span>
                            <el-form-item label="" label-width="0">
                              <el-time-picker value-format="HH:mm:ss" format="HH:mm:ss" :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }" placeholder="结束时间" v-model="TimeRuleItem.timeArray[1]">
                              </el-time-picker>
                            </el-form-item>

                            <template v-if="TimeRuleItem.uiOpt.curRuleType !== '按次定额收费'">
                              <el-form-item label="" label-width="0" class="input-width-control">
                                <el-checkbox style="margin-right: 15px" v-model="TimeRuleItem.uiOpt.isMaxCharge" @change="timeRuleMaxChargeChange($event, TimeRuleItem)">封顶</el-checkbox>
                              </el-form-item>

                              <template v-if="TimeRuleItem.uiOpt.isMaxCharge">
                                <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit">
                                  <el-input type="text" placeholder="￥" v-model="TimeRuleItem.maxCharge"></el-input>
                                  <span class="unit">元</span>
                                </el-form-item>
                              </template>
                            </template>

                            <div class="del-icon" @click="delParkChargeStandardPeriodVoListItem(parkChargeStandardVoListItem,  parkChargeStandardVoListItem.parkChargeStandardPeriodVoList, index)" v-if="parkChargeStandardVoListItem.parkChargeStandardPeriodVoList.length > 2">
                              <i class="el-icon-close"></i>
                            </div>
                             <div class="show-rule-detail-icon"  @click="expandAndCollapse(TimeRuleItem)">
                                <i
                                  class="el-icon-caret-bottom"
                                  :class="{rotate180:TimeRuleItem.uiOpt.isShowDetail}"
                                ></i>
                              </div>
                          </div>
                           <el-collapse-transition>
                             <div v-show="TimeRuleItem.uiOpt.isShowDetail" class="time-rule-content">
                               <el-form-item label="" label-width="0px" class="input-width-control" style="margin-bottom: 0; margin-left: 40px;">
                                <el-radio-group v-model="TimeRuleItem.uiOpt.curRuleType" @change="timeRuleChange($event, TimeRuleItem)">
                                  <div class="rule-type-tab">
                                    <el-tooltip effect="dark" :content="`${item === '按次定额收费' ? '适用于按停车次数收费的停车场' : ''}${item === '按单价收费' ? '适用于按单位时间收费的停车场，如6元/小时' : ''}${item === '递增收费' ? '适用于前段时间收取固定额，后段按定额或单位时间收取费用的场景' : ''}`" placement="top" v-for="(item, index) in TimeRuleItem.uiOpt.ruleTypeOpt">
                                      <div class="tab-item" :class="{active: item === TimeRuleItem.uiOpt.curRuleType}">
                                        <el-radio :label="item">{{item}}</el-radio>
                                      </div>
                                    </el-tooltip>

                                  </div>
                                </el-radio-group>
                              </el-form-item>
                              <div class="rule-setting-content">
                                <div class="dingE-content type-content" v-if="TimeRuleItem.uiOpt.curRuleType === '按次定额收费'">

                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div class="el-form--inline zb-inline-form rule-inline-form">
                                      <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                        <el-input placeholder="￥" type="text" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                        <span class="unit">元/次</span>
                                      </el-form-item>
                                    
                                    </div>
                                  </template>

                                </div>

                                <div class="price-content type-content" v-if="TimeRuleItem.uiOpt.curRuleType === '按单价收费'">
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div class="el-form--inline zb-inline-form rule-inline-form">
                                      <el-form-item label="每" label-width="40px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                        <span class="unit">分钟</span>
                                      </el-form-item>


                                      <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                        <span class="unit">元</span>
                                      </el-form-item>
                                      
                                    </div>
                                  </template>
                                </div>

                                <div class="xunhuan-content type-content" v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费'">
                                  <div class="top-circle"></div>
                                  <div class="bottom-circle"></div>
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div class="el-form--inline zb-inline-form rule-inline-form" v-if="dindex === 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1">
                                      <el-form-item label="首" label-width="78px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                        <span class="unit">分钟</span>
                                      </el-form-item>


                                      <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                        <span class="unit">元</span>
                                      </el-form-item>

                                      

                                      <el-button type="primary" size="mini" class="add-ruleDetial-icon" style="margin-left: 8px" @click="addDingE_RuleItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList)"><i class="el-icon-plus"></i>定额</el-button>
                                      <el-button type="primary" size="mini" class="add-ruleDetial-icon" @click="addXunHuan_RuleItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList)" :disabled="TimeRuleItem.isHasXunhuan"><i class="el-icon-plus"></i>循环</el-button>
                                    </div>

                                    <div class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form" v-if="dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1">
                                      <el-form-item label="定额" label-width="78px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                        <span class="unit">分钟</span>
                                      </el-form-item>


                                      <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                        <span class="unit">元</span>
                                      </el-form-item>


                                      <div class="del-icon" @click="delRuleItemDetailItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)">
                                        <i class="el-icon-close"></i>
                                      </div>
                                    </div>
                                  </template>
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">

                                    <div class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form" v-if=" ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 2">
                                      <el-form-item label="之后每" label-width="78px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="分钟数" v-model="ruleItemDetailItem.chargeUnit"></el-input>
                                        <span class="unit">分钟</span>
                                      </el-form-item>


                                      <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                        <el-input type="text" placeholder="￥" v-model="ruleItemDetailItem.chargeAmount"></el-input>
                                        <span class="unit">元</span>
                                      </el-form-item>

                                    

                                      <div class="del-icon" @click="delRuleItemDetailXunHuanItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)">
                                        <i class="el-icon-close"></i>
                                      </div>
                                    </div>

                                  </template>
                                </div>
                                  <div class="el-form--inline zb-inline-form rule-inline-form" style="margin-bottom: 0px; margin-top: 18px" :style="{marginLeft: TimeRuleItem.uiOpt.curRuleType === '递增收费' ? '20px' : '0px'}" v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费' || TimeRuleItem.uiOpt.curRuleType === '按单价收费'">
                                    <el-form-item label="结算方式"  label-width="78px" class="jie-suan">
                                      <el-radio-group v-model="TimeRuleItem.mxSettleType">
                                        <el-radio v-for="item in opts.optionMxSettleType" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
                                      </el-radio-group>
                                    </el-form-item>
                                    <el-tooltip effect="dark" placement="top">
                                      <div slot="content">
                                        自然计算：超过时间区间后顺延至计费单位结束才进入下一个时间区间进行计费； <br />
                                          强制结算：超过时间区间点后，不考虑计费单位，直接转入下一个时间区间进行计费<br />
                                          如：<br />
                                          12点前5元/小时，12点后6元/小时，车11:30进场<br />
                                          自然结算：11:30-12:30 5元，12:30后才按6元/小时收费，如果12:15出场，则需交费5元；<br />
                                          强制结算：11:30-12:00 5元，12:00后按照6元/小时收费，如果12:15出场，则需交费5元+6元=11元
                                        </div>

                                        <i class="el-icon-question question-icon"></i>
                                    </el-tooltip>
                                  </div>

                              </div>
                             </div>
                           </el-collapse-transition>
                          
                        </div>

                        <!-- 区分时段 end -->

                        <!-- 24小时计费 start -->
                        <div class="rule-setting dates-rules daysRules" v-if="(parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段' && parkChargeStandardVoListItem.parkChargeStandardPeriodVoList[0].uiOpt.curRuleType !== '按次定额收费') || parkChargeStandardVoListItem.uiOpt.curSplitTime === '分时段'">
                          <div class="top-title">24小时计费</div>
                          <div class="daysRules-content">
                            <div class="el-form--inline zb-inline-form rule-inline-form">
                              <el-form-item label="24小时制" label-width="120px">
                                <el-radio-group v-model="parkChargeStandardVoListItem.natureDay">
                                  <el-radio :label="0">停车时长</el-radio>
                                  <el-radio :label="1">自然日</el-radio>
                                </el-radio-group>
                              </el-form-item>

                              <el-form-item label="" label-width="0" v-if="parkChargeStandardVoListItem.natureDay === 1">
                                <el-time-picker value-format="HH:mm:ss" format="HH:mm:ss" :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }" placeholder="自然日开始时间" v-model="parkChargeStandardVoListItem.startTime">
                                </el-time-picker>
                              </el-form-item>
                              <el-tooltip effect="dark" placement="top">
                                <div slot="content">
                                  停车时长：不受自然日限制，直接以24小时停车时长作为一个计费区间，如果车辆09:00:00入场，到第二天09:00:00为一个计费区间； <br />
                                    自然日： 起始时间24小时为一个区间，假如设置起始时间为08:00:00，车辆09:00:00入场，到第二天08:00:00也将会结算一次<br />
                                  </div>

                                  <i class="el-icon-question question-icon"></i>
                              </el-tooltip>
                            </div>

                            <div class="el-form--inline zb-inline-form rule-inline-form select-form-item">
                              <el-form-item label="收费规则循环" label-width="120px" class="input-width-control short-input-item">
                                <el-select v-model="parkChargeStandardVoListItem.loopType" placeholder="请选择">
                                  <el-option v-for="item in opts.optionLoopType" :key="item.value" :label="item.name" :value="item.value">
                                  </el-option>
                                </el-select>
                              </el-form-item>
                              <el-tooltip effect="dark" placement="top">
                                <div slot="content">
                                  收费规则循环：确定一个计费区间（24小时）后的计费方法： <br />
                                    假如按停车时长收费，停车首个小时收费10元，之后按每小时2元收费，停车时长超过24小时：<br />
                                    1）循环整个收费规则：超过24小时后，继续首个小时收费10元，之后每小时收费2元。<br />
                                    2）循环末段收费规则：超过24小时后，依然按照每小时2元进行收费。<br />
                                  </div>

                                  <i class="el-icon-question question-icon"></i>
                              </el-tooltip>
                            </div>

                            <div class="el-form--inline zb-inline-form rule-inline-form" style="height: 33px">
                              <el-form-item label="24小时封顶" label-width="120px" class="input-width-control">
                                <el-checkbox v-model="parkChargeStandardVoListItem.uiOpt.isMaxCharge" @change="isMaxChargeChange($event, parkChargeStandardVoListItem)">封顶</el-checkbox>
                              </el-form-item>

                              <template v-if="parkChargeStandardVoListItem.uiOpt.isMaxCharge">
                                <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.maxCharge'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                  <el-input placeholder="￥" type="text" v-model="parkChargeStandardVoListItem.maxCharge"></el-input>
                                  <span class="unit">元</span>
                                </el-form-item>
                                
                              </template>

                            </div>

                            <div class="el-form--inline zb-inline-form rule-inline-form" style="height: 33px">
                              <el-form-item label="24小时子封顶" label-width="120px" class="input-width-control">
                                <el-checkbox v-model="parkChargeStandardVoListItem.uiOpt.customIsMaxCharge" @change="customIsMaxChargeChange($event, parkChargeStandardVoListItem)">封顶</el-checkbox>
                              </el-form-item>

                              <template v-if="parkChargeStandardVoListItem.uiOpt.customIsMaxCharge">
                                <el-form-item label="" label-width="0px" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.customMaxUnit'" :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]">
                                  <el-input type="text" placeholder="分钟数" v-model="parkChargeStandardVoListItem.customMaxUnit"></el-input>
                                  <span class="unit">分钟</span>
                                </el-form-item>

                                <span
                                    class="unit"
                                    style="margin-right: 10px"
                                  >封顶</span>
                                <el-form-item label="" label-width="0" class="input-width-control short-input-item hasUnit" :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.customMaxCharge'" :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]">
                                  <el-input type="text" placeholder="￥" v-model="parkChargeStandardVoListItem.customMaxCharge"></el-input>
                                  <span class="unit">元</span>
                                </el-form-item>
                                
                              </template>

                            </div>

                          </div>
                        </div>
                        <!-- 24小时计费 end -->

                      </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </el-form>
    </div>

      <el-form label-width="120px" size="small" class="zb-form rule-form">

        <el-form-item size="medium" class="action-box" label-width="0px">
          <el-button type="primary" v-if="!$route.query.isAddRule" @click="saveEdit">保存</el-button>
          <el-button type="primary" v-if="$route.query.isAddRule" @click="saveEdit">确定</el-button>
          <el-button type="primary" plain @click="back">取消</el-button>
        </el-form-item>
  
      </el-form>
  </div>
</div>
</template>

<script>
import pageScript from "./EditRule.js";
export default pageScript;
</script>

<style lang="less" scoped>
@import "../../../../../assets/less/base/variables.less";
@import "../../../../../assets/less/base/newTabPageCommom.less";

.el-upload__tip {
  display: flex;
  flex-direction: column;
}

.main-content {
  margin: 0 20px;
  margin-top: 20px;
}


</style>

<style lang="less" scoped>
@import "../../../AddParkingLot/AddParkingLotComponents/FormContent.less";
.zb-form {
  width: 480px;
}
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
.rule-top {
  .zb-inline-form {
    &.select {
      .el-form-item {
        .el-form-item__content {
          width: 114px;
        } 
      }
    }
  }
}

.zb-form .jie-suan .el-radio-group .el-radio {
  width: 90px;
  margin-left: 14px;
}

</style>

<style lang="less" scoped>
@import "./EditRule.less";
</style>
